<template>
  <div class="header row">
    <div class="left">
      <el-menu
        v-if="leftType === 'menu'"
        :default-active="leftMenu[0] ? leftMenu[0].name : 'test'"
        mode="horizontal"
        background-color="#f6f6f6"
        text-color="#333"
        active-text-color="#8B2E2F"
        @select="handleClick"
      >
        <el-menu-item v-for="(item, index) in leftMenu" :key="index" :index="item.name" :disabled="item.disabled">
          <template slot="title">
            <!-- <img :src="item.icon" class="icon"> -->
            <div class="fwb">{{ item.label }}</div>
          </template>
        </el-menu-item>
      </el-menu>
      <div v-if="leftType === 'label'" class="title row lh56">
        <img :src="leftInfo.icon" class="icon">
        <div>{{ leftInfo.label }}</div>
      </div>
    </div>
    <div class="middle">
      <slot name="middle" />
    </div>
    <div class="right">
      <slot name="right" />
    </div>
  </div>
</template>

<script>
export default {
  name: 'Header',
  props: {
    leftType: {
      type: String,
      default: ''
    }, // 左侧样式
    leftMenu: {
      type: Array,
      default: () => []
    }, // 菜单类型
    leftInfo: {
      type: Object,
      default: () => { return {}; }
    } // 标题类型
  },
  methods: {
    handleClick(activeName) {
      this.$emit('activeMenu', activeName);
    }
  }
};
</script>

<style scoped lang="scss">
.header {
  .left {
    .el-menu-item {
      height: 50px;
      line-height: 50px;
      padding: 0 5px;
      display: flex;
      align-items: center;
      margin-right: 20px;
    }
    .icon {
      width: 26px;
      height: 26px;
      margin-right: 10px;
      display: block;
      overflow: hidden;
      border-radius: 5px;
    }
  }
}
</style>
